<template>
  <van-popup v-model:show="innerShow" round position="bottom">
    <div class="pc-guide-drawer pb-80 pt-20 relative text-333333">
      <svg-icon
        name="icon-shanchuxian"
        :size="14"
        color="#333"
        class="absolute right-15 top-15"
        @click="close"
      />
      <div class="text-17 font-bold text-center">AI数字人电脑端</div>
      <div class="flex px-20 mt-32">
        <div
          class="guide-number flex items-center justify-center w-24 h-24 text-white text-15 font-bold"
        >
          <svg-icon name="icon-xing" :size="10" color="#fff" />
        </div>
        <div class="pb-15 flex-1 w-0 ml-6">
          <div class="text15 leading-21 font-bold">
            高效便捷的
            <span class="text-with-underline">一站式工作平台</span>
          </div>
          <van-image :src="pcImageUrl" class="w-full mt-10 h-203" />
          <div class="mt-10 text-13">
            操作便捷：全面的编辑器功能，轻而易剪，轻松出片！
          </div>
          <div class="mt-10 text-13">
            运行速度：电脑端运行速度较快，导出视频的速度比手机端快
          </div>
        </div>
      </div>
      <div
        class="px-15 py-10 w-full opera-box-shadow van-nav-bar--fixed !top-auto !bottom-0"
      >
        <ButtonFooter button-text="复制网址" @confirm="confirmHandle" />
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { IMG_CDN_39 } from "@/constants";
import { copyToClipboard } from "@/utils";
import { useCompanyStoreHook } from "@/store/modules/company";

const props = defineProps({
  show: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(["update:show"]);

// 使用内部变量避免直接修改 prop
const innerShow = ref(props.show);

// 监听外部 show 变化
watch(
  () => props.show,
  val => {
    innerShow.value = val;
  }
);

// 监听内部变化并通知父组件
watch(innerShow, val => {
  emit("update:show", val);
});

// 公司信息存储
const companyStore = useCompanyStoreHook();
// 复制
const confirmHandle = () => {
  copyToClipboard(companyStore.pcUrl, {
    successMessage: "复制成功",
    successOptions: {
      icon: "success",
      duration: 1000
    }
  });
};

const close = () => {
  innerShow.value = false;
};

const pcImageUrl = `${IMG_CDN_39}/home/example_pc_client3.png`;

onMounted(() => {
  // 如果store中没有公司信息，则请求
  if (!companyStore.hasFetched) {
    companyStore.fetchCompanyInfo();
  }
});
</script>

<style scoped lang="less">
.pc-guide-drawer {
  border-radius: 12px 12px 0 0;
  background-image: linear-gradient(180deg, #d5e2ff 0%, #ffffff 16%);
}
.guide-number {
  padding-right: 2px;
  border-radius: 5px 5px 15px;
  background-image: linear-gradient(139deg, #6c3dff 0%, #0f07ff 100%);
}
</style>
